<template>
  <a-modal
    v-model:open="open"
    title="手术记录"
    :maskClosable="false"
    :bodyStyle="{ maxHeight: modelMaxHeight, overflow: 'hidden auto' }"
    :width="800"
  >
    <div v-for="(item, index) in state.surgeryData" :key="index">
      <div
        style="
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-bottom: 10px;
        "
      >
        <span class="reportName">{{ item.surgeryName }}</span>
        <span style="color: #4e5969"
          >手术时间：<span style="color: #1d2129">{{ item.surgeryBeginTime }}</span></span
        >
      </div>
      <div style="margin-top: 10px">
        {{ item.surgeryContext }}
      </div>
    </div>
    <template #footer>
      <a-button key="back" @click="open = false">关闭</a-button>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
const activeKey = ref('1')
const open = ref(false)

const modelMaxHeight = ref(window.innerHeight * 0.8 - 150 + 'px')

const state = reactive({
  surgeryData: []
})

const init = (data) => {
  open.value = true
  state.surgeryData = data
}

defineExpose({
  init
})
</script>
<style lang="less" scoped>
.reportName {
  font-size: 16px;
  font-weight: 600;
}
</style>
